<template>
  <div class="page mall-list">
    <div class="scroll-view">
      <customHeader middleTitle="商城" rightTitle="订购记录" @rightCallBack="toOrderRecord"  @leftCallBack="handleBack">
      </customHeader>
      <div class="page-body">
        <ul class="tabList">
          <li v-for="(item,index) in tabList" :key="index" @click="tabSelect(index)" :class="{active:tabIndex===index}">{{item}}</li>
        </ul>
        <ul class="product-list" v-show="tabIndex==1">
          <template v-for="(item,index) in deviceList">
            <li :key="index" v-if="item.status===0" @click="toProductDetails(item.machineType,item.commidyType)" >
              <img class="qrImg" :src="imgFormate(item.mainImage)" alt >
              <div>
                <div class="name">{{item.machineToolName}}</div>
                <div class="desc">{{item.machineToolDescription}}</div>
                <div class="price">
                  <span>¥ {{item.currentPrice}}</span>
                  <span>¥ {{item.originalPrice}}</span>
                </div>
              </div>
            </li>
          </template>  
        </ul>
        <ul class="product-list"  v-show="tabIndex==0">
          <template v-for="(item,index) in serviceList">
            <li :key="index" v-if="item.status===0" @click="toProductDetails(item.machineType,item.commidyType)">
            <img class="qrImg" :src="imgFormate(item.mainImage)" alt >
              <div>
                <div class="name">{{item.machineToolName}}</div>
                <div class="desc">{{item.machineToolDescription}}</div>
                <div class="price">
                  <span>¥ {{item.currentPrice}}</span>
                  <span>¥ {{item.originalPrice}}</span>
                </div>
              </div>
            </li>
          </template>  
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast,MessageBox } from "mint-ui";
import config from "../../base/profile/config.json";
import jsBridge from "../../tools/jsBridge.js";

export default {
  name: "mallList",
  data() {
    return {
      tabList:["软件服务","硬件设备"],
      tabIndex:0,
      deviceList: [],
      serviceList: [],
      isOpen:false,
    };
  },
  methods: {
    handleBack() {
       sessionStorage&&sessionStorage.removeItem("mallTabIndex");
       if (String(this.$route.query.close) == 'true') {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
    },
    tabSelect(index){
      this.tabIndex=index;
      sessionStorage.setItem("mallTabIndex",index);
    },
    toOrderRecord() {
      this.$router.push({ path: "/mallList/orderRecord" });
    },
    imgFormate(v) {
      return config.shopImgUrlPrefix + v;
    },
    //能否订购聚客宝
    queryJkbOrderStatus(machineType) {
      this.ajax({
        url: "/newapp/software/service/canOrderJuKeBao.do",
        type: "get",
        data: {
          machineToolId: machineType
        },
        controlLoading: true
      }).then(res=> {
        if(res.success && res.resultObject.canOrder==1) {
          this.$router.push({ 
            path: '/mallList/serviceProductDetails',
            query: {machineType: machineType, orderStatus: res.resultObject.orderStatus}
          });
          return;
        }
        MessageBox({
          title: "温馨提示",
          confirmButtonText: "知道了",
          message: res.resultObject.msg,
          showCancelButton: false,
          closeOnClickModal: false
        });
      }).catch(err=> {

      });
    },
    toProductDetails(machineType,commidyType) {
      if(machineType==34 || machineType==35) {
        this.queryJkbOrderStatus(machineType);
        return;
      }
      if(this.isOpen==false&&(CommonUtil.isMessagePackage(machineType))){
        MessageBox({
          title: "温馨提示",
          confirmButtonText: "去开通",
          message: "尚未开通短信推广功能业务，请先开通，再订购短信",
          showCancelButton: false,
          closeOnClickModal: false
        }).then(action => {
          if (action == "confirm") {
            this.$router.push({path:"/openMessageMarketing"});
          }
        });
        return;
      } 
      //会员管理
      let url="/mallList/productDetails";
      if(commidyType===5){//应用类
        url="/mallList/serviceProductDetails";
      }
      this.$router.push({ path: url,query:{machineType:machineType}});
    },
    // 获取商城列表
    loadData() {
      this.ajax({
        url: `newapp/orderService/appShoppingCenter.do?commidyType=2,5`,
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (res.success && res.resultObject) {
            let deviceList = [];
            let serviceList = [];
            const list = res.resultObject.list;
            for (const item of list) {
              if (item.commidyType == 2) {//硬件类
                deviceList.push(item);
              } else if (item.commidyType == 5) {//服务类
                serviceList.push(item);
              }
            }
            this.deviceList = deviceList;
            this.serviceList = serviceList;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    //查询是否开通短信账户
    queryAccount() {
      this.ajax({
        url: "/newapp/smsmarketing/queryAccount.do",
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            this.isOpen = res.resultObject.status == 1 ? true : false;//'当前状态，1：有效，0：失效'
          }
        })
        .catch(function (err) {

        });
    },
  },
  created() {
    this.tabIndex= sessionStorage&&sessionStorage.getItem("mallTabIndex")?Number(sessionStorage.getItem("mallTabIndex")):0;
    if(this.$route.query.mallTabIndex){
      this.tabIndex=Number(this.$route.query.mallTabIndex);
    }
    this.loadData();
    this.queryAccount();
  },
  components: {
    customHeader
  }
};
</script>
<style lang='scss' scoped>
@import "mall";
</style>
